<route lang="json5">
{
  style: {
    navigationBarTitleText: '个人信息',
    navigationStyle: 'custom',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :title="'个人信息'" />
  <view class="person-msg" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <uni-forms class="form" ref="form" :modelValue="form">
      <uni-forms-item label="头像" name="avatar">
        <view class="head" @click="changeAvatar">
          <!-- <image :src="form.avatar || userInfoRef.defaultImage" mode=""></image> -->
          <view>
            <uni-file-picker
              ref="avaterPickerRef"
              :value="[{ name: '', extname: '', url: form.avatar || userInfoRef.defaultImage }]"
              limit="1"
              :del-icon="false"
              disable-preview
              :imageStyles="imageStyles"
              file-mediatype="image"
              @select="selectAvatar"
            ></uni-file-picker>
          </view>
        </view>
      </uni-forms-item>

      <uni-forms-item label="昵称" name="nickname">
        <uni-easyinput type="text" v-model="form.nickname" placeholder="请输入昵称" />
      </uni-forms-item>
      <uni-forms-item label="性别" name="sex" v-model="form.sex">
        <view>
          <radio-group @change="sexChange">
            <label class="radio">
              <radio value="1" :checked="form.sex === '1'" color="#ac9dd4" />
              男
            </label>
            <label class="radio">
              <radio value="0" :checked="form.sex === '0'" color="#ac9dd4" />
              女
            </label>
          </radio-group>
        </view>
      </uni-forms-item>
      <uni-forms-item label="生日" name="birthday">
        <picker mode="date" :value="form.birthday" @change="birthdayChange">
          <view class="uni-input">{{ form.birthday }}</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item label="城市" name="city">
        <picker mode="region" :value="form.city.split(' ')" @change="cityChange">
          <view class="uni-input">{{ form.city }}</view>
        </picker>
      </uni-forms-item>
      <!-- <uni-forms-item label="手机号" name="phone">
        <uni-easyinput type="text" v-model="form.phone" placeholder="请输入手机号" />
      </uni-forms-item> -->
    </uni-forms>
    <div class="bottom">
      <view class="submit" @click="submit">保存</view>
      <view class="submit quiteLoginOut" @click="quiteLoginOut">退出登录</view>
    </div>
  </view>
</template>

<script lang="ts" setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { useUserStore } from '@/store/user'
import { updateUserInfoApi } from '@/service/user'
import { SearchTypeEnum } from '@/enums/SearchTypeEnum'
import { getEnvBaseUrl } from '@/utils'

const userInfoRef = useUserStore()
const form = userInfoRef.userInfo
const avaterPickerRef = ref()
let tmpAvatar = ''
const baseUrl = getEnvBaseUrl()

onLoad(async () => {
  if (userInfoRef.isLogined) {
    const avatarRes = await uni.downloadFile({
      url: baseUrl + '/file/download?type=' + SearchTypeEnum.USER + '&param=' + form.id, // 仅为示例，并非真实的资源
      // filePath: wx.env.USER_DATA_PATH + '/111.png',
      header: {
        Authorization: form.token,
      },
    })

    console.log('download', avatarRes.tempFilePath)
    tmpAvatar = avatarRes.tempFilePath
  }
})
const changeAvatar = () => {}
const selectAvatar = (ev) => {
  tmpAvatar = ev.tempFiles[0].image.location
  form.avatar = ev.tempFiles[0].image.location
}

const birthdayChange = (ev) => {
  form.birthday = ev.detail.value
}
const cityChange = (ev) => {
  form.city = ev.detail.value.join(' ')
}
const sexChange = (ev) => {
  form.sex = ev.detail.value
}
const submit = async () => {
  uni.showLoading({ title: '修改中...' })
  const res = await uni.uploadFile({
    url: baseUrl + '/file/upload', // 仅为示例，非真实的接口地址
    filePath: tmpAvatar,
    name: 'file',
    formData: {
      type: SearchTypeEnum.USER,
      param: JSON.stringify(form),
    },
  })
  console.log('upload avatar resp', res)
  form.avatar = JSON.parse(res.data).data
  await updateUserInfoApi(form)
  uni.hideLoading()
  uni.navigateBack()
  uni.showToast({ icon: 'none', title: '修改成功' })
}
const quiteLoginOut = () => {
  userInfoRef.clearUserInfo()
  uni.navigateBack()
  uni.showToast({ icon: 'none', title: '退出登录' })
}

const imageStyles = {
  width: 72,
  height: 72,
  border: {
    radius: '50%',
  },
}

// 获取屏幕安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets)
</script>

<style lang="scss">
.head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #909399;
}

.uni-forms {
  padding: 0;
  margin-top: 10rpx;
  background-color: #ffffff;
  .uni-forms-item {
    height: 110rpx;
    padding: 0 20rpx;
    line-height: 110rpx;
  }
}
.form {
  background-color: #ffffff;
}
.bottom {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  > .submit {
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background-color: $main-color;
  }
}

.radio {
  margin-right: 50rpx;
}

.quiteLoginOut {
  background-color: $font-color-base !important;
  // color: #ff6b35 !important;
}
</style>
